<template>
	<view class="top" ref="top">
		
	
		<view class="titleText" 
		:style="{
		    height: navHeight + 'rpx',
		    'padding-top': navTop + 'rpx',
		    'padding-right': navPaddingRight + 'rpx',
		  }">
		  <view class="back" @click="back">
		  	<image src="https://img.zhizhuangtong.com/project_media/img/xcx/back.png" mode=""></image>
		  </view>
		  收银台
		  </view>
		  
	</view>

	<view class="cashierCounter _width" :style="{
		'margin-top': navTop-2 + 'rpx',
		 'top': navHeight + 'rpx',
	}">

		<view class=" payInfo _width">
			<view class="lebel _width flex">{{order.pay_type_text}}</view>
			<view class="money _width flex">¥{{order.need_pay}}</view>
			<view class="isExpired" v-if="isExpired">
				订单已失效
			</view>
			<view class="pleaserHorder _width " v-else>
				请您在
				<view class="time">{{remainingTime}} </view>
				内完成支付，否则订单将会被自动取消。
			</view>
		</view>



		<!-- <view class="card address _width" v-if="addressListData">
			<view class="AddressList _width flex">
				<view class="left">
					<view class="label1 dian1">
						{{addressListData.province_name}}&nbsp;{{addressListData.city_name}}&nbsp;{{addressListData.county_name}}
					</view>
					<view class="label2  dian2">{{addressListData.address}}</view>
					<text
						class="label3 block">{{addressListData.consignee}}&nbsp;{{addressListData.mobile}}</text>
				</view>
				<view class="right" @click="addAddress">
					<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" />
				</view>
			</view>
		</view> -->


		<!-- 商家信息 -->
		<!-- 		<view class="card merchant flex _width" v-for="(item,index) in order.goods" :key="index">
			<view class="title _width flex">
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/merchant.png" class="icon" />
				<view class="right">
					<text class="label dian">{{item.company_name}}</text>
				</view>
			</view>


			<view class="goodsInfo  _width flex" >
				<image :src="item.img" class="cover" />
				<view class="right">
					<view class="title _width flex">
						<text class="name dian">{{item.sku_name}}</text>
						<text class="monery">¥&nbsp;{{item.price}}</text>
					</view>
					<view class="size _width flex">
						尺寸：{{item.size}}
					</view>
					<view class="number _width flex">
						x{{item.num}}
					</view>

				</view>
			</view>

			<view class="menu  _width flex">
				<text class="leftLabel">配送</text>
				<view class="right flex">
					<view class="titles _width flex">
						<view class="delivery _width dian">{{order.send_type_text}}</view>
					</view>
					<image src="https://img.zhizhuangtong.com/project_media/img/xcx/rightTag.png" class="tag" />
				</view>
			</view>
		</view> -->


		<!-- 底部按钮 -->
		<view class="bottomFexBtn">
			<view class="rowConter">

				<view class="row">
					<view class="btn" @click="pay">
						支付
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		defineExpose,
		watch
	} from 'vue';
	import {
		onLoad,
		onReady,
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import env from '@/api/config.js';
	import {
		order_info,
		order_pay
	} from '@/api/order.js'
	const remainingTime = ref(""); // 剩余时间的显示
	const isExpired = ref(false); // 是否过期
	const targetTime = ref(''); // 截止时间
	let timer = null; // 定时器引用


	const order = ref({}) //订单预览信息
	const addressListData = ref([]) //地址列表


	const params = ref({
		id: null,
	});

	// 头部的高度
	const headHeight = ref('')
	// 导航栏的右边距
	const navPaddingRight = ref('')
	// 导航栏的高度
	const navHeight = ref('')
	// 导航栏距离顶部的距离onReachBottom
	const navTop = ref('')

	const envType = ref('') //当前的环境
	const payData = ref({}) //支付参数
	const selected = ref(false) //设置默认地址

	onLoad((option) => {
		if (option.order_id) {
			params.value.id = option.order_id;
		}

	});

	onMounted(() => {
		// 获取胶囊的位置
		const menuButtonObject = uni.getMenuButtonBoundingClientRect();
		// 获取系统信息
		uni.getSystemInfo({
			success: (res) => {
				// 获取状态栏的高度
				const statusBarHeight = res.statusBarHeight;
				navTop.value = menuButtonObject.top * 2;
				navHeight.value = menuButtonObject.height * 2;
				navPaddingRight.value = (menuButtonObject.width + 6) * 2;
				// 头部的高度 = 状态栏的高度 + 胶囊的高度 + （胶囊顶部的距离 - 状态栏的高度 ） * 2 【胶囊顶部的距离 - 状态栏的高度 * 2  = 胶囊的上下外边距】
				headHeight.value =
					(statusBarHeight +
						menuButtonObject.height +
						(menuButtonObject.top - statusBarHeight) * 2) *
					2;
			},
		});
		queryPayData()
	})

	// 订单详情
	const queryPayData = async () => {
		const res = await order_info({
			id: params.value.id
		});
		if (res.code === 1) {
			console.log('--------', res.data)
			order.value = res.data.order;
			addressListData.value = res.data.order.address
			targetTime.value = convertToIOSCompatibleFormat(res.data.order.auto_cancel);
			// demand.value = res.data.demand;
			startCountdown(); // 页面加载时启动倒计时
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg
			})
		}
	}
	// 返回上一步
	const back = ()=>{
		uni.redirectTo({
			url: '/pages/mineB/mineOrder/mineOrderDetails/index?id=' +  params.value.id
		});
	}

	// 将目标时间转换为兼容 iOS 的格式
	const convertToIOSCompatibleFormat = (time) => {
		// 假设返回的时间格式为 "yyyy-MM-dd HH:mm:ss"
		if (time) {
			// 替换空格为T，变为 "yyyy-MM-ddTHH:mm:ss" 格式
			return time.replace(" ", "T");
		}
		return time; // 如果已经是合适的格式，则直接返回
	};



	const calculateRemainingTime = () => {
		const now = new Date();
		const endTime = new Date(targetTime.value); // 使用正确的格式进行日期转换
		const timeDifference = endTime - now;

		if (timeDifference <= 0) {
			isExpired.value = true;
			clearInterval(timer); // 停止倒计时
			remainingTime.value = "订单已失效";
			return;
		}

		const hours = Math.floor(timeDifference / (1000 * 60 * 60));
		const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
		const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

		remainingTime.value = `${hours} 小时 ${minutes} 分 ${seconds} 秒`;
	};



	// 启动倒计时
	const startCountdown = () => {
		calculateRemainingTime();
		timer = setInterval(calculateRemainingTime, 1000);
	};


	onUnmounted(() => {
		clearInterval(timer); // 页面卸载时清除定时器
	});


	// 支付
	const pay = async () => {

	const apiUrl = env.config;
	if (apiUrl.includes('-service')) {
		//dev 
		envType.value = 4
	} else{
		// 正式环境
		envType.value = 1
	}
		const res = await order_pay({
			order_id: params.value.id,
			pay_type: 4,
			env: envType.value,
		});
		if (res.code === 1) {
			console.log('支付参数', res.data)
			payData.value = JSON.parse(res.data.payInfo)
			await uni.requestPayment({
				provider: 'wxpay',
				timeStamp: payData.value.timeStamp,
				nonceStr: payData.value.nonceStr,
				package: payData.value.package,
				signType: payData.value.signType,
				paySign: payData.value.paySign,
				success: function(res) {
					uni.setStorageSync('isUpload', '1')
					uni.showToast({
						icon: 'success',
						title: res.msg,
					})
					setTimeout(() => {
						uni.$emit('refreshIfNeeded', true)
						uni.navigateBack({
							delta: 1
						})
					}, 200);
				},
				fail: function(err) {
					uni.setStorageSync('isUpload', '1')
					setTimeout(() => {
						uni.$emit('refreshIfNeeded', true)
						uni.navigateBack({
							delta: 1
						})
					}, 200);
				}
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: res.msg,
			})
			setTimeout(() => {
				uni.$emit('refreshIfNeeded', true)
				uni.navigateBack({
					delta: 1
				})
			}, 200);
		}
	}
</script>

<style lang="less" scoped>
	.top {
		width: 100%;
		// height: 500rpx;
		// background: #fff;

		// backdrop-filter: blur(10px) !important;
		// background-color: rgba(255, 197, 121, 0.75) !important;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 12;
		
	

		.titleText {
			position: relative;
			.back{
				position: absolute;
				left: 10rpx;
				bottom: 0rpx;
				width: 30rpx;
				height: 100%;
				padding-bottom: 25rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				
				image{
					width: 60rpx;
					height: 35rpx;
				}
			}
			display: block;
			color: #2F2F2F;
			font-size: 24rpx;
			width: 100%;
			text-align: center;
		}
	}


	.cashierCounter {
		position: absolute;
		z-index: 1;
		// min-height: 100vh;
		// border: 1px solid red;
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
		flex-wrap: wrap;

		.card {
			// min-height: 170rpx;
			background: #FFFFFF;
			padding: 25rpx;
			border-radius: 18rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			box-shadow: 0 5rpx 8rpx 0 rgba(0, 0, 0, .08);
		}


		// 支付金额
		.payInfo {
			flex-wrap: wrap;
			margin-bottom: 80rpx;

			.lebel {
				display: flex;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin: 15rpx 0 20rpx;
			}

			.money {
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #2F2F2F;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 20rpx;

			}

			.isExpired {
				text-align: center;
				color: #666666;
			}

			.pleaserHorder {
				padding: 10rpx 20%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				font-style: normal;
				box-sizing: border-box;
				white-space: normal;
				word-wrap: break-word;
				display: block;

				.time {
					color: #FF3535;
					width: 220rpx;
					text-align: center;
					display: inline-block;
				}
			}

		}


		// 地址
		.address {
			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: block;
			}

			.AddressList {
				.left {
					flex: 1;

					.block {
						display: block;
					}

					.label1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.label2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin: 20rpx 0;
					}

					.label3 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

				}

				.right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					width: 100rpx;

					image {
						width: 12rpx;
						height: 20rpx;
						opacity: 0.8;
					}
				}
			}
		}

		// 订单信息

		.merchant {
			flex-wrap: wrap;

			.title {
				height: 36rpx;
				align-items: center;

				.icon {
					width: 25rpx;
					height: 25rpx;
					margin-right: 10rpx;
				}

				.right {
					width: calc(100% - 35rpx);
					display: flex;
					align-items: center;

					.label {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.tag {
						margin-left: 10rpx;
						width: 12rpx;
						height: 20rpx;
					}
				}
			}

			.goodsInfo {
				margin: 25rpx 0 40rpx;

				.cover {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					overflow: hidden;
				}

				.right {
					width: calc(100% - 170rpx);
					flex-wrap: wrap;

					.title {
						margin-bottom: 10rpx;
						width: 100%;
						justify-content: space-between;

						.name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.monery {
							display: flex;
							align-items: center;
							margin-left: 20rpx;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 500;
							font-size: 26rpx;
							color: #333333;
							line-height: 36rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}

					.size {
						margin-bottom: 15rpx;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.stock {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #ef4040;
						height: 26rpx;
						line-height: 26rpx;
						margin-top: 15rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.number {
						justify-content: flex-end;
						align-items: center;

					}
				}
			}


			.menu {
				align-items: center;
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.leftLabel {
					width: 100rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.right {
					width: calc(100% - 100rpx);
					align-items: center;

					.titles {
						flex: 1;
						flex-wrap: wrap;

						.delivery {
							text-align: right;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
							font-style: normal;
							text-transform: none;
						}

						.date {
							text-align: right;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #333333;
							font-style: normal;
							text-transform: none;
						}

						.tips {
							display: block;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
							line-height: 30rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
					}

					.tag {
						padding-left: 20rpx;
						width: 12rpx;
						height: 20rpx;
					}

				}
			}
		}

		// 底部按钮
		.bottomFexBtn {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 5;
			padding-bottom: env(safe-area-inset-bottom);
			padding-bottom: constant(safe-area-inset-bottom);
			height: calc(120rpx + env(safe-area-inset-bottom));
			height: calc(120rpx + constant(safe-area-inset-bottom));
			width: 100%;
			// background-color: #000000 !important;
			backdrop-filter: blur(10px) !important;
			background-color: rgba(255, 255, 255, .82) !important;
			box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.05);
			box-sizing: border-box;
			display: flex;
			align-items: flex-start;

			.rowConter {
				padding: 15rpx 25rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.row {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.btn {
						width: 100%;
						height: 80rpx;
						background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%);
						border-radius: 20rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 80rpx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}


				}
			}
		}
	}
</style>